<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../public/css/bootstrap.css">
  <link rel="stylesheet" href="../public/css/header.css">
  <link rel="stylesheet" href="../public/css/body.css">
  <link rel="stylesheet" href="../public/css/footer.css">
  <script src="../public/js/jquery.min.js"></script>
  <script src="../public/js/popper.min.js"></script>
  <script src="../public/js/bootstrap.min.js"></script>
  <title>Document</title>
  <style></style>
</head>

<body>
  <!-- ck头部 -->
  <div class="ck-header bg-white">
    <div class="container">
      <!-- 导航条 -->
      <div class="navbar navbar-light navbar-expand-lg">
        <!-- logo区 -->
        <a href="#" class="navbar-brand">
          <img src="../public/img/header/logo.jpg" alt="">
        </a>
        <!-- 小菜单区 -->
        <button class="navbar-toggler" data-toggle="collapse" data-target="#cd">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 大菜单区 -->
        <div class="navbar-collapse collapse" id="cd">
          <!-- 搜索框 -->
          <div class="ck-search">
            <input type="text" placeholder="请输入商品名称">
          </div>
          <!-- 面包屑导航 -->
          <ul class="ck-bread breadcrumb  bg-transparent">
            <li class="breadcrumb-item">
              <a href="#" class="">
                <img src="../public/img/header/position_icon.png" alt="">
                <span>天津</span>
              </a>
            </li>
            <li class="breadcrumb-item">
              <a href="#" class="">
                <img src="../public/img/header/shopcar_icon.png" alt="">
                <span>0件</span>
              </a>
            </li>
            <li class="breadcrumb-item">
              <a href="#" class="">
                登录
              </a>
            </li>
            <li class="breadcrumb-item">
              <a href="#" class="">
                注册
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- ck导航部分 -->
  <div class="ck-nav">
    <div class="container">
      <ul class="nav justify-content-between bg-light">
        <li class="nav-item">
          <a href="#" class="nav-link text-center">
            <p>Home page</p>
            <p>首页</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-center">
            <p>All Products</p>
            <p>全部商品</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-center">
            <p>Cake Series</p>
            <p>蛋糕系列</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-center">
            <p>Wagashi</p>
            <p>零食糕点</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-center">
            <p>About Us</p>
            <p>关于我们</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 轮播图 -->
  <div class="ck-carousel">
    <div class="container">
      <!-- 最外层 -->
      <div class="carousel slide" data-ride="carousel" id="banner">
        <!-- 图片展示区 -->
        <div class="carousel-inner">
          <!-- 展示项 -->
          <div class="carousel-item active">
            <img src="../public/img/banner/banner1.jpg" alt="" class="w-100 d-block">
          </div>
          <div class="carousel-item">
            <img src="../public/img/banner/banner2.jpg" alt="" class="w-100 d-block">
          </div>
          <div class="carousel-item">
            <img src="../public/img/banner/banner3.jpg" alt="" class="w-100 d-block">
          </div>
          <div class="carousel-item">
            <img src="../public/img/banner/banner4.jpg" alt="" class="w-100 d-block">
          </div>
        </div>
        <!-- 左右控制区 -->
        <a href="#banner" class="carousel-control-prev badge-danger" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#banner" class="carousel-control-next badge-danger" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
        <!-- 标识符控制区 -->
        <ul class="carousel-indicators">
          <li data-target="#banner" data-slide-to="0"></li>
          <li data-target="#banner" data-slide-to="1"></li>
          <li data-target="#banner" data-slide-to="2"></li>
          <li data-target="#banner" data-slide-to="3"></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 商品部分 -->
  <!-- 最新上架 -->
  <div class="ck-newshop">
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-12">
          <div class="ck-card card">
            <a href="#">
              <img src="../public/img/products/new-1.jpg" alt="" class="w-100 d-block card-img-top">
            </a>
            <div class="card-body p-2">
              <h5>灰姑娘系列-水晶舞会</h5>
              <span class="float-left">需要提前预约</span>
              <span class="text-primary font-weight-bold float-right">￥340.00</span>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-12">
          <div class="ck-card card">
            <a href="#">
              <img src="../public/img/products/new-2.jpg" alt="" class="w-100 d-block card-img-top">
            </a>
            <div class="card-body p-2">
              <h5>黛丝系列-夏日甜甜</h5>
              <span class="float-left">需提前预订</span>
              <span class="text-primary font-weight-bold float-right">￥288.00</span>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-12">
          <div class="ck-card card">
            <a href="#">
              <img src="../public/img/products/new-3.jpg" alt="" class="w-100 d-block card-img-top">
            </a>
            <div class="card-body p-2">
              <h5>睡美人系列-玫瑰之梦</h5>
              <span class="float-left">需要提前预约</span>
              <span class="text-primary font-weight-bold float-right">￥199.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ck底部 -->
  <div class="ck-footer bg-white">
    <div class="container">
      <!-- 折叠帮助 -->
      <div class="ck-help mt-2 mb-2">
        <div class="lt">
          <div class="ck-card card">
            <button class="btn btn-block text-left border-0 pl-3 pb-1 pt-1" data-target="#one" data-toggle="collapse">帮助中心</button>
            <div id="one" data-parent="#lt" class="collapse">
              <!-- 折叠内容 -->
              <div class="row">
                <div class="col-lg-2 col-6 text-center mt-2">
                  <img src="../public/img/footer/footer-icon.png" alt=""><span>购物指南</span>
                  <ul class="list-unstyled">
                    <li>
                      <a href="#">购物流程</a>
                    </li>
                    <li>
                      <a href="#">蛋糕尺寸</a>
                    </li>
                  </ul>
                </div>
                <div class="col-lg-2 col-6 text-center mt-2">
                  <img src="../public/img/footer/footer-icon.png" alt=""><span>订购范围</span>
                  <ul class="list-unstyled">
                    <li>
                      <a href="#">地图查询</a>
                    </li>
                    <li>
                      <a href="#">团购业务</a>
                    </li>
                  </ul>
                </div>
                <div class="col-lg-2 col-6 text-center mt-2">
                  <img src="../public/img/footer/footer-icon.png" alt=""><span>公司服务</span>
                  <ul class="list-unstyled">
                    <li>
                      <a href="#">北京门店</a>
                    </li>
                    <li>
                      <a href="#">官网营业资质</a>
                    </li>
                  </ul>
                </div>
                <div class="col-lg-2 col-6 text-center mt-2">
                  <img src="../public/img/footer/footer-icon.png" alt=""><span>企业招聘</span>
                  <ul class="list-unstyled">
                    <li>
                      <a href="#">觅心招聘</a>
                    </li>
                    <li>
                      <a href="#">田园招聘</a>
                    </li>
                  </ul>
                </div>
                <div class="col-lg-2 col-6 text-center mt-2">
                  <img src="../public/img/footer/footer-icon.png" alt=""><span>售后服务</span>
                  <ul class="list-unstyled">
                    <li>
                      <a href="#">投诉渠道</a>
                    </li>
                    <li>
                      <a href="#">客服中心</a>
                    </li>
                    <li>
                        <a href="#">加盟维权</a>
                      </li>
                  </ul>
                </div>
                <div class="col-lg-2 col-6 text-center mt-2">
                 <span>友情链接</span>
                  <ul class="list-unstyled">
                    <li>
                      <a href="#">天猫官网</a>
                    </li>
                    <li>
                      <a href="#">百度</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部版权 -->
      <div class="ck-copy clearfix row">
        <div class="l col-lg-4 col-12">
          <p>Copyright2010 ©北京市好利来食品有限公司 版权所有</p>
          <p>好利来 中国创造 since1992 请勿相信任何加盟信息 </p>
          <p>邮箱:***@163.com</p>
          <p>客服电话：400-**-***</p>
        </div>
        <div class="m col-lg-4 col-6">
          <p><a href="#">京icp备***号 </a><img src="../public/img/footer/copy.png" alt="">
            <a href="#">京公网安备 ***号</a></p>
        </div>
        <div class="r col-lg-4 col-6">
          <p class="text-right font-weight-bold">关注我们</p>
          <div class="box position-relative">
              <img src="../public/img/footer/wx-icon.png" alt="">
                 <div class="ck-wx card position-absolute">
                    <div class="card-header p-0 text-center pt-2 pb-2">微信关注我们</div>
                    <img src="../public/img/footer/wxm-icon.png" alt="" class="card-img-top p-2">
                  </div> 
            </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>